<template>

  <div>
    <div id='addnewAddress' v-show="xinjianshow">
      <div id="xiugaidizhi">

        <div class="xiugaidizhi_list">
          <ul>
            <li><span>姓名</span> <input type="text" value="" v-model="addressName"></li>
            <li><span>手机号码</span> <input type="text" value="" v-model="phoneNum"></li>
            <li @click="resetAddress()" style="overflow: hidden"><span>所在地区</span><span
              class="suozaidiqu">{{suozaidiqu}}</span><img
              src="../assets/gengduo.png" alt="" style="float: right;margin-right: 4rem;position: relative;top: 2rem">
            </li>
            <li style="border-bottom: 0px"><span>详细地址</span> <input type="text" value="" v-model="xiangxiAddress"
                                                                    style="height: 6rem;line-height: 6rem;font-size: 1.6rem"
                                                                    placeholder="请填写详细地址"></li>
          </ul>
        </div>

        <div class="xiugaidizhi_list_btn">
          <button @click="reviseBtns()">确认修改</button>
        </div>
      </div>


      <div class="tishi" v-show="tishi">
        <p>{{warnMessage}}</p>
      </div>
    </div>


    <div id="listDetial" v-if="xinjianWrap">
      <div class="addressList">
        <div class="addressInfor">
          <p class="addressContent" v-show="showContent"><span class="first">{{firstname}}</span><span class="second">{{secondname}}</span><span class="three">{{threename}}</span>
          </p>
        </div>
        <!--一级地址-->
        <ul class="firstAddress" v-if="one">
          <li v-for="(item,index) in arrAddress[0]" @click="jumpTwo(index)" ref="menuItem">{{item.area_name}}<span class="addressId" style="display: none" ref="menuItemid">{{item.id}}</span></li>
        </ul>
        <!--二级地址-->
        <ul class="secondAddress" v-if="two">
          <li v-for="(item,index) in arrAddress2[0]" @click="jumpThree(index)" ref="menuItemthree">{{item.area_name}}<span class="addressIdsecond" style="display: none"ref="menuItemthree2" >{{item.id}}</span></li>
        </ul>
        <!--三级地址-->
        <ul class="thirdAddress" v-if="three">
          <li v-for="(item,index) in arrAddress3[0]" @click="jumpfinish(index)" ref="menuItemthree3">{{item.area_name}}<span class="addressIdsecond" style="display: none"ref="menuItemthree33" >{{item.id}}</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'five',
    data() {
      return {
        AuthTokenThree: '',
        xinjianshow:true,
        xinjianWrap:false,
        one:true,
        two:false,
        three:false,
        showContent:true,
        arrAddress:[],
        arrAddress2:[],
        arrAddress3:[],
        firstname:'',
        secondname:'',
        threename:'',
        area_name: "",
        id:"",
        ider:'',
        parent_id:'',
        secondid:'',
        addressName: '',
        phoneNum: '',
        suozaidiqu: "",
        xiangxiAddress: '',
        tishi: false,
        time:2000,
        warnMessage:''
      }
    },
    // 页面加载时展示省级菜单
    created() {
      var that = this;
      that.AuthTokenThree = sessionStorage.getItem('AuthToken');
      console.log(that.AuthTokenThree);
      axios.get('http://test.zjapi.xianxiangle.com/province?AuthToken=' + that.AuthTokenThree,).then           (function (res) {
        console.log(res.data.data);
        that.arrAddress.push(res.data.data);
      }).catch(function (err) {

      })
    },
    methods: {
      resetAddress() {
        this.xinjianshow = false;
        this.xinjianWrap = true;

      },
      // 跳转获取市级菜单
      jumpTwo(index) {
        var that = this;
        that.one = false;
        that.two = true;
        that.three = false;
        that.firstname = that.$refs.menuItem[index].innerText;
        // 一级id
        that.id = that.$refs.menuItemid[index].innerText;
        console.log(that.firstname);
        console.log(that.id);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.id,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress2.push(res.data.data);
          console.log(that.arrAddress2)
        }).catch(function (err) {
        })
      },
      jumpThree(index) {
        var that = this;
        that.one = false;
        that.two = false;
        that.three = true;
        that.secondname = that.$refs.menuItemthree[index].innerText;
        // 二级id
        that.ider = that.$refs.menuItemthree2[index].innerText;
        console.log(that.secondname);
        console.log(that.ider);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.ider,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress3.push(res.data.data);
          console.log(that.arrAddress3)
        }).catch(function (err) {
        })
      },
      jumpfinish(index) {
        var that = this;
        that.one = false;
        that.two = false;
        that.three = false;
        that.threename = that.$refs.menuItemthree3[index].innerText;
        // 三级id
        that.idsan = that.$refs.menuItemthree33[index].innerText;
        console.log(that.threename);
        console.log(that.idsan);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.idsan,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress3.push(res.data.data);
          console.log(that.arrAddress3)
          that.showContent = false;
          // sessionStorage.setItem('threename',that.threename)
          that.xinjianshow = true;
          that.xinjianWrap = false;
          that.suozaidiqu = that.firstname + that.secondname + that.threename
        }).catch(function (err) {
        })
      },
      reviseBtns() {
        // alert(111)
        var that = this;
        if (that.addressName == '' || that.phoneNum == '' || that.xiangxiAddress == '') {
          // alert('请填写完整信息！')
          that.tishi = true;
          that.warnMessage = '请填写完整信息！';
          window.setTimeout(function () {
            that.tishi = false
          }, that.time);
        } else {
          axios.post('http://test.zjapi.xianxiangle.com/address_update',{
            AuthToken:that.AuthTokenThree,
            address_id:this.$route.query.addID,
            name: that.addressName, // 收货人
            mobile: that.phoneNum,  //(string) 手机号码
            province_id: that.id,       //(integer) 省级ID
            city_id:that.ider,         //(integer)市级ID
            area_id: that.idsan,     //(integer)县级ID
            address: that.xiangxiAddress, //(string) 详细收货地址
            province:that.firstname,          //(string) 省份名称
            city:that.secondname,            //(string) 城市名称
            area:that.threename,             //(string) 区县名称
          }).then(function (res) {
            console.log(res);
            // console.log(res.data.message);
            that.tishi = true;
            that.warnMessage=res.data.message;
            window.setTimeout(function () {
              that.tishi = false;
              that.$router.push({path:'/third'})
            }, that.time);
          }).catch(function (err) {
          })

        }
      }
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  #addnewAddress {
    width: 100%;
    //display: none;
    margin: auto;
    #xiugaidizhi {
      width: 100%;
      margin: auto;

      .xiugaidizhi_list {
        width: 100%;
        ul {
          width: 100%;
          background: white;
          border-top: 1px solid #ccc;
          overflow: hidden;
          li {
            width: 100%;
            height: 6rem;
            line-height: 6rem;
            //border: 1px solid;
            font-size: 2rem;
            color: #666666;
            padding-left: 1rem;
            //font-weight: 600;
            margin-left: 1rem;
            border-bottom: 1px solid #ccc;
            /*display: flex;*/
            //overflow: hidden;
            text-align: left;
            .suozaidiqu {
              margin-left: 2rem;
            }
            img {
              width: 1.2rem;
              height: 1.6rem;
            }
            input {
              width: 60%;
              outline: none;
              border: 0;
              font-size: 1.6rem;
              position: relative;
              left: 1rem;
            }
          }
        }
      }
      .xiugaidizhi_list_btn {
        width: 100%;
        text-align: center;
        margin-top: 3rem;
        button {
          width: 96%;
          height: 4rem;
          line-height: 4rem;
          text-align: center;
          background: #32D69C;
          color: white;
          font-size: 1.8rem;
          border-radius: 3rem;
          outline: none;
          border: 0;
        }
      }
    }
  }

  .tishi {
    width: 60%;
    height: 3rem;
    line-height: 3rem;
    background: #666666;
    //border: 1px solid #cccccc;
    position: relative;
    //bottom: 2rem;
    top: 1rem;
    color: white;
    text-align: center;
    //bottom: 16rem;
    border-radius: 3rem;
    /*display: none;*/
    margin: auto;
    p {
      height: 3rem;
      line-height: 3rem;
      //font-size: 1.6rem;
      margin: auto;
    }
  }





  #listDetial {
    width: 100%;
    margin: auto;
    overflow: hidden;
    //display: none;
    header {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      //border: 1px solid;
      display: flex;
      justify-content: space-between;
      background: white;
      padding: 1rem;
      img {
        width: 2rem;
        height: 1.8rem;
      }
      p:nth-child(1) {
        //font-weight: 700;
        color: #666666;
        font-size: 2rem;
        span {
          font-size: 2rem;
          position: relative;
          left: 0.5rem;
          bottom: 0.2rem;
        }
      }
      p:nth-child(2) {
        font-size: 2.2rem;
        position: relative;
        right: 2rem;
      }
    }

    //地址信息
    .addressList {
      width: 100%;
      background: white;
      margin: auto;
      //margin-top: 1rem;
      //一级地址
      .addressInfor {
        width: 100%;
        background: #eeeeee;
        border-top: 1px solid #cccccc;
        margin: auto;
        //display: none;
        p {
          width: 90%;
          margin: auto;
          height: 5rem;
          line-height: 5rem;
          //border: 1px solid;
          font-size: 1.6rem;
        }

      }
      .firstAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          //border: 1px solid;
          text-align: left;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }
      //二级地址
      .secondAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        /*display: none;*/
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          //border: 1px solid;
          text-align: left;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }

      //三级地址菜单
      .thirdAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        /*display: none;*/
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          text-align: left;
          //border: 1px solid;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }
    }
  }
</style>
